<template>
    <div class="detail">
        <!-- 详情 -->
        <el-descriptions title="询价信息" :labelStyle="{ width: '100px' }" :column="2">
            <el-descriptions-item label="型号">
                <DescriptionsTooltip :value="qutoData.product_partnumber">{{ qutoData.product_partnumber }}</DescriptionsTooltip>
            </el-descriptions-item>
            <el-descriptions-item label="品牌">
                <DescriptionsTooltip :value="qutoData.product_brand ">{{qutoData.product_brand  }}</DescriptionsTooltip>
            </el-descriptions-item>
            <el-descriptions-item label="数量">{{ qutoData.quantity }}</el-descriptions-item>
            <el-descriptions-item label="批次">{{ qutoData.quote.product.dateCode }}</el-descriptions-item>
            <el-descriptions-item label="封装">
                <DescriptionsTooltip :value="qutoData.product_package">{{qutoData.product_package}}</DescriptionsTooltip>
            </el-descriptions-item>
            <el-descriptions-item label="接受价">
                <span style="color: #FF0000;">{{ Number.isInteger(qutoData.adoptPrice) ? qutoData.adoptPrice + '.00' :
                    qutoData.adoptPrice }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="币种">{{ qutoData.quoteCurrency }}</el-descriptions-item>
            <el-descriptions-item label="交货日期">{{ qutoData.deliveryDate }}</el-descriptions-item>
            <el-descriptions-item label="交货地">{{ qutoData.quote.deliveryPlace == "FArea01" ? "中国大陆" : "中国香港"
            }}</el-descriptions-item>
            <el-descriptions-item label="包装">
                <DescriptionsTooltip :value="qutoData.product_packing">{{qutoData.product_packing}}</DescriptionsTooltip>
            </el-descriptions-item>
            <el-descriptions-item label="发票类型">
                <DescriptionsTooltip :value="qutoData.invoiceType">{{qutoData.invoiceType}}</DescriptionsTooltip>
            </el-descriptions-item>
            <el-descriptions-item label="剩余报价时间">
                <span style="color:#E02020;">已结束
                </span>
            </el-descriptions-item>

        </el-descriptions>

        <label class="suptitle">历史报价</label>
        <div>
            <el-table :data="tableData" size="mini" :loading='tableLoading' border :cell-style="{ 'text-align': 'center' }"
                :header-cell-style="{ 'text-align': 'center' }">
                <el-table-column prop="product" label='报价时间' width="100">
                    <template v-slot="{ row }">
                        {{ row.product.createDate }}
                    </template>
                </el-table-column>
                <el-table-column prop="inPrice" label='报价' width="60">
                    <template v-slot="{ row }">
                        <span style="color:#00AB2B;">{{ Number.isInteger(row.inPrice.unitPrice) ? row.inPrice.unitPrice +
                            '.00' : row.inPrice.unitPrice }}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="inPrice" label='币种' width="60">
                    <template v-slot="{ row }">
                        {{ row.inPrice.currency == 1 ? '人民币' : '美元' }}
                    </template>
                </el-table-column>
                <el-table-column prop="quantity" label='数量' width="60"></el-table-column>
                <el-table-column prop="deliveryDate" label='交货日期' width="80">
                    <template v-slot="{ row }">
                        {{ row.deliveryDate && row.deliveryDate.split(' ')[0] }}
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="termDate"
                         label='报价有效期'
                         width="100">
          <template v-slot="{row}">
            {{row.termDate && row.termDate.split(' ')[0]}}
          </template>
        </el-table-column> -->
                <el-table-column prop="product" label='批次' show-overflow-tooltip width="50">
                    <template v-slot="{ row }">
                        {{ row.product.dateCode }}
                    </template>
                </el-table-column>
                <el-table-column prop="deliveryPlace" label='交货地'>
                    <template v-slot="{ row }">
                        {{ row.deliveryPlace == "FArea01" ? "中国大陆" : "中国香港" }}
                    </template>

                </el-table-column>

            </el-table>
        </div>
        <div class='foot' v-loading="btnLoading">
            <el-button class="resletBtn" size="small" @click="$emit('close')">取消</el-button>
        </div>

    </div>
</template>

<script>
import DescriptionsTooltip from "@/components/DescriptionsTooltip/index.vue";
export default {
    name: 'detail',
    components: {
        DescriptionsTooltip
    },
    props: {
        isActurl: {
            default: true,
            type: Boolean,
        },
        qutoData: {
            default: () => {
                return {};
            },
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            tableData: [],
            tableLoading: false,
            btnLoading: false,
        };
    },
    created() {
        this.tableData = this.qutoData.historyQuotes;
    },
    mounted() {
        console.log('tag', this.qutoData)
    },
    methods: {
        // 无法报价
    },
    filters: {
        manageTime(v) {
            if (!v) {
                return v;
            } else {
                let hour = parseInt(v / 3600);
                let min = parseInt((v - hour * 60 * 60) / 60);
                let sec = parseInt((v % 3600) - min * 60);
                return `${hour < 10 ? '0' + hour : hour}:${min < 10 ? '0' + min : min}:${sec < 10 ? '0' + sec : sec}`;
            }
        },
    },
    directives: {
        inpNum: {
            inserted: function (el, binding) {
                el.oninput = function (v) {
                    setTimeout(() => {
                        let value = v.target.value;
                        if (binding.modifiers.noquto) {
                            value = value.replace(/[^\d]+/g, '');
                        } else {
                            value = value.replace(/[^\d^\.]+/g, '');
                        }
                        v.target.value = value;
                    });
                };
            },
        },
        remainedTime: {
            inserted: function (el, binding) {
                let interval = null;
                let html = el.innerHTML;
                function timex() {
                    html = el.innerHTML;
                    if (!html.includes('已结束')) {
                        let v = html.split(':')[0] * 3600 + html.split(':')[1] * 60 + html.split(':')[2] * 1;
                        v = v - 1;
                        if (v <= 0) {
                            el.innerHTML = '已结束';
                            binding.value.quoteRemainMin = 0;
                            interval || clearInterval(interval);
                        } else {
                            binding.value.quoteRemainMin = v;
                            let hour = parseInt(v / 3600);
                            let min = parseInt((v - hour * 60 * 60) / 60);
                            let sec = parseInt((v % 3600) - min * 60);
                            el.innerHTML = `${hour < 10 ? '0' + hour : hour}:${min < 10 ? '0' + min : min}:${sec < 10 ? '0' + sec : sec
                                }`;
                        }
                    }
                }
                if (!html.includes('已结束')) {
                    timex();
                    interval = setInterval(() => {
                        timex();
                    }, 1000);
                    if (interval) {
                        el.setAttribute('data', interval);
                    }
                }
            },
            unbind: function (el) {
                let data = el.getAttribute('data');
                if (data) {
                    clearInterval(data);
                }
            },
        },
    },
};
</script>
<style scoped lang="scss" src="@/assets/styles/public.scss"></style>
<style scoped lang="scss">
.detail {
    // position: relative;
}

::v-deep .el-drawer {
    background: red !important;

    ::v-deep .el-drawer__title .el-drawer__header {
        margin-bottom: 10px !important;
    }
}

::v-deep .el-descriptions__header {
    // color: #008fff;
    // margin: 0 20px 20px 20px;
    color: #1A2035;
    font-weight: 500;
    font-size: 12px;
    margin-bottom: 15px;
    font-size: 14px;

    .el-descriptions__title {
        font-size: 14px;
    }
}

::v-deep .el-descriptions__body {
    // margin: 0 20px;
    border: 1px solid #ccc;
    padding: 12px 20px;
    border-radius: 4px;

    .el-descriptions-item__container {
        justify-content: space-between !important;

        .el-descriptions-item__content {
            margin-right: 40px;
        }
    }

    .el-descriptions-item__label {
        color: #999;
        font-size: 12px;
    }

    .el-descriptions-item__content {
        color: #1A2035;
        font-size: 12px;
        font-weight: 400;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

}

.suptitle {
    color: #1A2035;
    display: block;
    font-weight: 600;
    font-size: 14px;
    padding: 15px 0;
}

.el-table {
    border-radius: 4px;
}

.el-form {
    // margin: 0 20px;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 4px;

    ::v-deep .el-input,
    .el-select {
        width: 250px;
    }

    .el-form-item__label {
        font-size: 12px;
        color: #999;
    }

    ::v-deep .el-form-item__error {
        top: 10px;
        left: 255px;
    }

    .el-form-item {
        margin-bottom: 10px;
    }

    ::v-deep .el-input__inner {
        text-align: left;
    }
}

.foot {
    // margin: 160px 0 0 0;
    text-align: center;
    position: absolute;
    left: 45%;
    bottom: 1%;
    // display: flex;
    // justify-content: space-around;
    // padding: 10px 140px;
}
</style >
 